// 基础柱状图
export const option1 = {
  xAxis: {
    data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
  },
  yAxis: {},
  series: [
    {
      type: 'bar',// 柱状图的方式，是将 series 的 type 设为 'bar'。
      data: [ 23, 24, 18, 25, 27, 28, 25 ]
    }
  ]
};

// 堆叠柱状图
// 有时候，我们不仅希望知道不同系列各自的数值，还希望知道它们之和的变化，这时候通常使用堆叠柱状图来表现。
export const option2 = {
  xAxis: {
    data: [ 'A', 'B', 'C', 'D', 'E' ]
  },
  yAxis: {},
  series: [
    {
      data: [ 10, 22, 28, 43, 49 ],
      type: 'bar',
      stack: 'x'// 表示该系列堆叠的类别
    },
    {
      data: [ 5, 4, 3, 5, 10 ],
      type: 'bar',
      stack: 'x'
    }
  ]
};

// 动态排序柱状图
export const option3 = {
  xAxis: {
    max: 'dataMax' // 表示用数据的最大值作为 X 轴最大值，视觉效果更好
  },
  yAxis: {
    type: 'category',
    data: [ 'A', 'B', 'C', 'D', 'E' ],
    inverse: true,// 表示 Y 轴从下往上是从小到大的排列
    animationDuration: 300,// 表示第一次柱条排序动画的时长
    animationDurationUpdate: 300,// 表示第一次后柱条排序动画的时长
    max: 2 // 如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条
  },
  series: [
    {
      realtimeSort: true,// 表示开启该系列的动态排序效果
      name: 'X',
      type: 'bar',
      data: [ 1200,1500,3000,4000,5000 ],
      label: { // 实时改变标签
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }
  ],
  animationDuration: 3000,// 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）
  animationDurationUpdate: 3000,//建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同
  animationEasing: 'linear',
  animationEasingUpdate: 'linear'
};
export const update = () => {
  var data = option3.series[0].data;
  for (var i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
      data[i] += Math.round(Math.random() * 2000);
    } else {
      data[i] += Math.round(Math.random() * 200);
    }
  }
  this.$refs.mychart3.chart.setOption(option3);
};

// 阶梯瀑布图
export const option4 = {
  title: {
    text: 'Waterfall'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: (function() {
      var list = [];
      for (var i = 1; i <= 11; i++) {
        list.push(`Oct/${ i }`);
      }
      return list;
    })()
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      stack: 'all',
      itemStyle: {
        normal: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        },
        emphasis: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        }
      },
      data: []
    },
    {
      name: 'positive',
      type: 'bar',
      stack: 'all',
      data: []
    },
    {
      name: 'negative',
      type: 'bar',
      stack: 'all',
      data: [],
      itemStyle: {
        color: '#f33'
      }
    }
  ]
};

// 折线图
export const option5 = {
  xAxis: {
    type: 'category',// 横坐标是类目型（category）
    data: [ 'A', 'B', 'C','D','E' ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      // 使用字符串 '-' 表示空数据
      data: [ 120, 200,'-', 150,100 ],// 纵坐标是数值型（value）的折线图
      type: 'line',
      lineStyle: { //通过 lineStyle 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等
        normal: {
          color: 'green',
          width: 4,
          type: 'dashed'
        }
      },
      label: { //数据点的标签
        show: true,
        position: 'top',
        textStyle: {
          fontSize: 20
        }
      }
    }
  ]
};

// 堆叠折线图
export const option6 = {
  xAxis: {
    data: [ 'A', 'B', 'C', 'D', 'E' ]
  },
  yAxis: {},
  series: [
    {
      data: [ 10, 22, 28, 43, 49 ],
      type: 'line',
      stack: 'x',
      areaStyle: {}// 使用区域填充色以表明堆叠的情况
    },
    {
      data: [ 5, 4, 3, 5, 10 ],
      type: 'line',
      stack: 'x',
      areaStyle: {}// 使用区域填充色以表明堆叠的情况
    }
  ]
};

// 区域面积图
export const option7 = {
  xAxis: {
    data: [ 'A', 'B', 'C', 'D', 'E' ]
  },
  yAxis: {},
  series: [
    {
      data: [ 10, 22, 28, 23, 19 ],
      type: 'line',
      areaStyle: {},
      smooth: true // 平滑曲线
    },
    {
      data: [ 25, 14, 23, 35, 10 ],
      type: 'line',
      areaStyle: {
        color: '#ff0',
        opacity: 0.5
      },
      smooth: true // 平滑曲线
    }
  ]
};

// 阶梯线图
export const option8 = {
  xAxis: {
    type: 'category',
    data: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Step Start',
      type: 'line',
      step: 'start',//step 属性用来表征阶梯线图的连接类型
      data: [ 120, 132, 101, 134, 90, 230, 210 ]
    },
    {
      name: 'Step Middle',
      type: 'line',
      step: 'middle',
      data: [ 220, 282, 201, 234, 290, 430, 410 ]
    },
    {
      name: 'Step End',
      type: 'line',
      step: 'end',
      data: [ 450, 432, 401, 454, 590, 530, 510 ]
    }
  ]
};

// 饼图
export const option9 = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: '直接访问'
        },
        {
          value: 234,
          name: '联盟广告'
        },
        {
          value: 1548,
          name: '搜索引擎'
        }
      ],
    }
  ]
};

// 环形图
export const option10 = {
  legend: {
    orient: 'vertical',
    x: 'left',
    data: [ 'A', 'B', 'C', 'D', 'E' ]
  },
  series: [
    {
      type: 'pie',
      radius: [ '50%', '70%' ],//它的前一项表示内半径，后一项表示外半径，这样就形成了一个圆环图。
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: { // 高亮
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      data: [
        { value: 335, name: 'A' },
        { value: 310, name: 'B' },
        { value: 234, name: 'C' },
        { value: 135, name: 'D' },
        { value: 1548, name: 'E' }
      ]
    }
  ]
};

// 南丁格尔图（玫瑰图）
export const option11 = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 100,
          name: 'A'
        },
        {
          value: 200,
          name: 'B'
        },
        {
          value: 300,
          name: 'C'
        },
        {
          value: 400,
          name: 'D'
        },
        {
          value: 500,
          name: 'E'
        }
      ],
      roseType: 'area'//series.roseType 值设为 'area' 实现南丁格尔图
    }
  ]
};

// 散点图
export const option12 = {
  xAxis: {
    data: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ]
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [ 220, 182, 191, 234, 290, 330, 310 ],
      // 图形大小可以使用 series.symbolSize 控制。它既可以是一个表示图形大小的像素值，也可以是一个包含两个 number 元素的数组，分别表示图形的宽和高。还可以是一个回调函数
      symbolSize: 20,
      // ECharts 内置形状包括：圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形，分别对应'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。使用内置形状时，只要将 symbol 属性指定为形状名称对应的字符串即可。
      // 如果想要将图形指定为任意的图片，以 'image://' 开头，后面跟图片的绝对或相对地址。形如：'image://http://example.com/xxx.png' 或 'image://./xxx.png'。
      // 将 symbol 设置为以 'path://' 开头的 SVG 路径即可。使用矢量图形的好处是，图片不会因为缩放而产生锯齿或模糊，并且通常而言比图片形式的文件大小更小。路径的查看方法为，打开一个 SVG 文件，找到形如 <path d="M… L…"></path> 的路径，将 d 的值添加在 'path://' 后即可。
      // <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 51.997 51.997" style="enable-background:new 0 0 51.997 51.997;" xml:space="preserve">
      // <path d="M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z"/>
      // </svg>
      symbol:
        'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'
    }
  ]
};


// 折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）
// 散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）
// 饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）
// 弦图 : a（系列名称），b（项1名称），c（项1-项2值），d（项2名称)， e(项2-项1值)

// 富文本
export const option13 = {
  series: [
    {
      type: 'scatter',
      symbolSize: 1,
      data: [
        {
          value: [ 0, 0 ],
          label: {
            show: true,
            formatter: [
              'Plain text',
              '{textBorder|textBorderColor + textBorderWidth}',
              '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',
              '{bg|backgroundColor + borderRadius + padding}',
              '{border|borderColor + borderWidth + borderRadius + padding}',
              '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'
            ].join('\n'),
            backgroundColor: '#eee',
            borderColor: '#333',
            borderWidth: 2,
            borderRadius: 5,
            padding: 10,
            color: '#000',
            fontSize: 14,
            shadowBlur: 3,
            shadowColor: '#888',
            shadowOffsetX: 0,
            shadowOffsetY: 3,
            lineHeight: 30,
            rich: {
              textBorder: {
                fontSize: 20,
                textBorderColor: '#000',
                textBorderWidth: 3,
                color: '#fff'
              },
              textShadow: {
                fontSize: 16,
                textShadowBlur: 5,
                textShadowColor: '#000',
                textShadowOffsetX: 3,
                textShadowOffsetY: 3,
                color: '#fff'
              },
              bg: {
                backgroundColor: '#339911',
                color: '#fff',
                borderRadius: 15,
                padding: 5
              },
              border: {
                color: '#000',
                borderColor: '#449911',
                borderWidth: 1,
                borderRadius: 3,
                padding: 5
              },
              shadow: {
                backgroundColor: '#992233',
                padding: 5,
                color: '#fff',
                shadowBlur: 5,
                shadowColor: '#336699',
                shadowOffsetX: 6,
                shadowOffsetY: 6
              }
            }
          }
        }
      ]
    }
  ],
  xAxis: {
    show: false,
    min: -1,
    max: 1
  },
  yAxis: {
    show: false,
    min: -1,
    max: 1
  }
};


// 通常情况下开发者不需要操心该如何去使用动画，只需要按自己的需求使用setOption更新数据，

// 数据过度动画
export const option14 = {
  animation: true,// 动画开启
  series: [
    {
      type: 'pie',
      radius: [ 0, '50%' ],
      data: [
        { name:'A',value:0.2 },
        { name:'B',value:0.3 },
        { name:'C',value:0.5 },
      ],
    },
  ]
};

// 无障碍访问
export const option15 = {
  // 生成的图表 DOM 上，会有一个 aria-label 属性，在朗读设备的帮助下，盲人能够了解图表的内容。
  aria: { //开启 aria.show 后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述
    show: true,
    // 下面几行可以不写，因为 label.enabled 默认 true
    label: {
      enabled: true
    },
    enabled:true,
    decal:{
      show:true// 贴花图案
    }
  },
  title: {
    text: '某站点用户访问来源',
    x: 'center'
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ]
    }
  ]
};

